<template>
	<view class="wrap cbj-wrap" style="background-color: #F4F6F5;padding-top:20rpx;padding-bottom: 50rpx;">
		<div class="cbj-form">
			<view class="article-title cbj-title">山东黄河河务局机关公文呈报签</view>
            <div class="doc-form2">
                <div class="row">
                        <div class="cell cell-4" style="min-height: auto !important;">
                            <div class="inline-group">
                                <view class="cell-label">局办登记[</view><span class="backColor"><input class="input short inputwidth2" style="width: 32rpx;" type="text" v-model="formData.nianhao" /></span><view class="cell-label">]第[</view><span class="backColor"><input class="input short inputwidth2" style="width: 50rpx; color: #999;" type="text" v-model="formData.fawenhao" /></span><view class="cell-label">]号</view>
                            </div>
                        </div>
                    </div>
				<div class="row">
					<div class="cell cell-4" style="min-height: auto !important;">
						<div class="inline-group">
							<view class="cell-label">部门(单位)登记[</view><span class="backColor"><input class="input short inputwidth2" style="width: 50rpx; " type="text" v-model="formData.fujian" /></span><view class="cell-label">]第[</view><span class="backColor"><input class="input short inputwidth2" style="width: 50rpx; color: #999;" type="text" v-model="formData.fenfa" /></span><view class="cell-label">]号</view>
						</div>
					</div>
				</div>
            </div>
			<div class="doc-form">
				<div class="row">
					<div class="cell cell-4"><view class="cell-label">主呈:</view><view class="backColor" style=";"><textarea placeholder="点击输入" type="text" v-model="formData.chaosong" /></view></div>
					<div class="cell cell-4">
						<view class="cell-label">审阅:</view>
						<view id="syGrid" class="image-grid">
							<image v-for="(value) in signImages['syGrid']" v-if="sealOptionsKey.includes('syGrid') && signImages['syGrid'] && signImages['syGrid'].length > 0"
								:src="value.imageUrl"
								class="seal-image"
								@click="handleLongPress(value.signUNID, value.hetype)"
							></image>
							<view v-if="!signImages['syGrid'] || signImages['syGrid'].length === 0" class="signature-placeholder"></view>
						</view>
					</div>
				</div>
				<div class="row">
					<div class="cell cell-1"><view class="cell-label vertical-label">事由</view></div>
					<div class="cell cell-7">
						<view class="backColor"><textarea placeholder="" type="text" v-model="formData.title"></textarea></view>
					</div>
				</div>
				<div class="row">
					<div class="cell cell-1"><view class="cell-label vertical-label">文件名称</view></div>
					<div class="cell cell-7">
						<div id="filename" style="padding: 5rpx 15rpx 5rpx 15rpx;">
							<view v-for="(item, index) in formData.list" :key="index" class="file-item">
								<text>{{item.fileName}}</text>
								<u-button type="primary" size="mini" @click="loadFile(item)">预览</u-button>
							</view>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="cell cell-1"><view class="cell-label vertical-label">办公室意见</view></div>
					<div class="cell cell-7">
						<view class="backColor" >
							<textarea type="text" v-model="formData.bgssh" placeholder="点击输入"></textarea>
						</view>
						<view id="sGrid1" class="image-grid">
							<image v-for="(value) in signImages['sGrid1']" v-if="sealOptionsKey.includes('sGrid1') && signImages['sGrid1'] && signImages['sGrid1'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
							<view v-if="!signImages['sGrid1'] || signImages['sGrid1'].length === 0" class="signature-placeholder"></view>
						</view>
					</div>
				</div>
				<div class="row">
					<div class="cell cell-4">
						<view class="cell-label">领导批示:</view>
						<view class="backColor" >
							<textarea type="text" v-model="formData.qianfa" placeholder="点击输入"></textarea>
						</view>
						<view id="qfGrid" class="image-grid">
							<image v-for="(value) in signImages['qfGrid']" v-if="sealOptionsKey.includes('qfGrid') && signImages['qfGrid'] && signImages['qfGrid'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
							<view v-if="!signImages['qfGrid'] || signImages['qfGrid'].length === 0" class="signature-placeholder"></view>
						</view>
					</div>
					<div class="cell cell-4">
						<view class="cell-label">会签:</view>
						<div style="display: flex; align-items: center;">
							<!-- border-bottom: 2rpx solid rgb(0, 137, 217); -->
							<view id="hqGrid" class="image-grid">
								<image v-for="(value) in signImages['hqGrid']" v-if="sealOptionsKey.includes('hqGrid') && signImages['hqGrid'] && signImages['hqGrid'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
								<view v-if="!signImages['hqGrid'] || signImages['hqGrid'].length === 0" class="signature-placeholder"></view>
							</view>
						</div>
						<view class="cell-label">部门(单位)审核:</view>
						<view id="hgGrid" class="image-grid">
							<image v-for="(value) in signImages['hgGrid']" v-if="sealOptionsKey.includes('hgGrid') && signImages['hgGrid'] && signImages['hgGrid'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
							<view v-if="!signImages['hgGrid'] || signImages['hgGrid'].length === 0" class="signature-placeholder"></view>
						</view>
						<div style="display: flex; align-items: center;">
							<view class="cell-label">呈报(部门)单位：</view>
							<view class="backColor" style="width:36% !important;"><textarea type="text" v-model="formData.zhuban" placeholder="点击输入" /></view>
						</div>
						<div style="display: flex; align-items: center;">
							<view class="cell-label">拟稿人：</view>
							<view class="backColor" style="width:65% !important;"><textarea type="text" v-model="formData.nigaoren" placeholder="点击输入" /></view>
						</div>
						<div style="display: flex; align-items: center;">
							<view class="cell-label">电话：</view>
							<view class="backColor" style="width:73% !important;"><textarea type="text" v-model="formData.dianhua" placeholder="点击输入" /></view>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="cell cell-1"><view class="cell-label vertical-label">办理结果</view></div>
					<div class="cell cell-7">
						<view class="backColor" >
							<textarea style="width: 100 !important;" type="text" v-model="formData.fabufanwei" placeholder="点击输入"></textarea>
						</view>
						<view id="jgGrid" class="image-grid">
							<image v-for="(value) in signImages['jgGrid']" v-if="sealOptionsKey.includes('jgGrid') && signImages['jgGrid'] && signImages['jgGrid'].length > 0" :src="value.imageUrl" class="seal-image" @click="handleLongPress(value.signUNID, value.hetype)"></image>
							<view v-if="!signImages['jgGrid'] || signImages['jgGrid'].length === 0" class="signature-placeholder"></view>
						</view>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      required: true
    },
    signImages: {
      type: Object,
      required: true
    },
    sealOptionsKey: {
      type: Array,
      required: true
    },
    loadFile: {
      type: Function,
      required: true
    },
    handleLongPress: {
      type: Function,
      required: true
    },
    gwTypeValue: {
      type: String,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
	.input.short {
		display: inline-block;
		margin: 0 0 -5rpx;
		box-sizing: border-box;
	}

	.input.short.inputwidth {
		text-align: center;
		width: 50rpx !important;
		padding: 5rpx 0rpx !important;
	}

	.input.short.inputwidth2 {
		text-align: center;
		width: 100rpx !important;
		padding: 5rpx 0rpx !important;
	}

	textarea {
		min-height: 60rpx;
		color: #333;
		background: transparent;
		width: 100%;
		font-size: 28rpx;
		border: none;
		outline: none;
		box-sizing: border-box;
		padding: 10rpx 15rpx;
		line-height: 1.5;
	}

	.cbj-wrap {
		background-color: #F4F6F5;
		padding-top: 20rpx;
		padding-bottom: 50rpx;

		.cbj-title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 40rpx;
			color: rgb(0, 137, 217) !important;
		}

		.doc-form2 {
			width: 720rpx;
			font-size: 25rpx;
			margin: 20rpx auto;
			background: rgb(244, 246, 245);
			color: rgb(0, 137, 217) !important;

			.row {
				display: flex;
				&:first-child {
					border-top: none;
				}

				.cell {
					min-height: 100rpx;
					flex: 1;
					box-sizing: border-box;
					padding: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					&:first-child {
						border-left: none;
					}

					span {
						color: #333;
					}

					.cell-label {
						font-size: 28rpx;
						margin-bottom: 10rpx;
						color: rgb(0, 137, 217) !important;
					}

					.vertical-label {
						writing-mode: vertical-lr;
						text-orientation: mixed;
						margin: 0 auto;
						color: rgb(0, 137, 217) !important;
					}

					&.cell-1 {
						flex: 0 0 80rpx;
						text-align: center;
						justify-content: center;
					}

					&.cell-2 {
						flex: 2;
					}

					&.cell-3 {
						flex: 3;
					}

					&.cell-5 {
						flex: 5;
					}
					&.cell-7 {
						flex: 7;
					}
				}

				.inline-group {
					display: flex;
					flex-direction: row;
					align-items: center;
					flex-wrap: wrap;

					.cell-label {
						margin-bottom: 0;
						margin-right: 5rpx;
					}

					// .backColor {
					// 	margin-top: 0;
					// 	margin-bottom: 0;
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: center;
					// }
				}

				// .backColor {
				// 	// background-color: white !important;
				// 	border-radius: 8rpx;
				// 	font-size: 28rpx;
				// 	color: #333;
				// 	min-height: 40rpx;
				// 	margin-top: 5rpx;
				// 	margin-bottom: 5rpx;
				// 	display: flex;
				// 	align-items: center;
				// 	padding: 0rpx 0rpx 0rpx 0rpx !important;
				// 	input,
				// 	textarea {
				// 		width: 100%;
				// 		font-size: 22rpx;
				// 		border: none;
				// 		outline: none;
				// 		padding: 10rpx;
				// 		margin: 0;
				// 		background: transparent;
				// 		box-sizing: border-box;
				// 	}

				// 	textarea {
				// 		height: auto;
				// 		min-height: 1.5em;
				// 		line-height: 1.8;
				// 		display: block;
				// 		flex: 1;
				// 	}
				// }

				.image-grid {
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					.seal-image {
						width: 120rpx;
						height: 120rpx;
						object-fit: contain;
						border: none;
						border-radius: 8rpx;
					}
				}

				.signature-placeholder {
					text-align: center;
					color: #999;
					font-size: 24rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				.file-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0;
					border-bottom: 1rpx solid #eee;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}

		.doc-form {
			border: 2rpx solid rgb(0, 137, 217);
			width: 720rpx;
			font-size: 25rpx;
			margin: 20rpx auto;
			// background: #fff;
			color: #333;

			.row {
				display: flex;
				border-top: 2rpx solid rgb(0, 137, 217);
				&:first-child {
					border-top: none;
				}

				.cell {
					border-left: 2rpx solid rgb(0, 137, 217);
					min-height: 100rpx;
					flex: 1;
					box-sizing: border-box;
					padding: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;

					&:first-child {
						border-left: none;
					}

					span {
						color: #333;
					}

					.cell-label {
						font-size: 28rpx;
						margin-bottom: 10rpx;
						color: rgb(0, 137, 217);
					}

					.vertical-label {
						writing-mode: vertical-lr;
						text-orientation: mixed;
						margin: 0 auto;
					}

					&.cell-1 {
						flex: 0 0 80rpx;
						text-align: center;
						justify-content: center;
					}

					&.cell-2 {
						flex: 2;
					}

					&.cell-3 {
						flex: 3;
					}

					&.cell-5 {
						flex: 5;
					}
					&.cell-7 {
						flex: 7;
					}

					input,
					textarea {
						border: none;
						font-size: 22rpx;
						// padding: 10rpx;
						margin: 0;
						background: transparent;
					}

					span {
						line-height: 1.8;
						margin: 0rpx 10rpx 0rpx 10rpx;
					}
				}

				.backColor {
					background-color: white;
					border-radius: 8rpx;
					padding: 0rpx 0rpx 0rpx 0rpx !important;
					font-size: 25rpx;
					color: #333;
					min-height: 40rpx;
					// margin-top: 5rpx;
					// margin-bottom: 5rpx;
					display: flex;
					align-items: center;

					input,
					textarea {
						width: 100%;
						// font-size: 28rpx;
						border: none;
						outline: none;
						// padding: 10rpx;
						margin: 0;
						background-color: white;
						box-sizing: border-box;
						&::placeholder {
							color: gray;
						}
					}

					textarea {
						height: 25rpx;
						// min-height: 1.5em;
						line-height: 1.8;
						display: block;
					}
				}

				.image-grid {
					display: flex;
					flex-wrap: wrap;
					gap: 10rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					.seal-image {
						width: 120rpx;
						height: 120rpx;
						object-fit: contain;
						border: none;
						border-radius: 8rpx;
					}
				}

				.signature-placeholder {
					text-align: center;
					color: #999;
					font-size: 24rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
				}

				.file-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 0;
					border-bottom: 1rpx solid #eee;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}
</style> 